<template>
  <div class="list-container">
    <div class="head">
      <div class="name">{{ title }}</div>
      <div class="line"></div>
    </div>
    <div class="body">
      <ObjectItem v-for="(item, index) in items"
                  :data="item"
                  @click.prevent="onClick(item)"
                  @dblclick.stop="ondblclick(item)"
                  :key="index">
      </ObjectItem>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import ObjectItem from './list-item.vue';
import objectLibrary  from '../../object/lib';
import { ListItem } from './index';

export default defineComponent({
  name: 'list-container',
  components: { ObjectItem },
  emits: ['select', 'use'],
  props: {
    title: {
      type: String,
      default: '分类',
    },
    items: {
      type: Array as PropType<Array<ListItem>>,
      default: () => {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    return {
      onClick(data: ListItem) {
        emit('select', data);
      },
      ondblclick(data: ListItem) {
        emit('use', data);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.list-container {
  display: flex;
  flex-direction: column;

  .head {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .name {
      color: blue;
    }

    .line {
      flex: 1;
      margin: 0 5px;
      border: 1px solid #bebebe;
    }
  }

  .body {
    padding: 4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
}
</style>
